import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs';
import { fullscreenLayout, withNoAnimation } from '../../utilities/chromatic-decorators';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';

<Meta
  title="Components/Drawer"
  component="bl-drawer"
  parameters={{
    layout: 'fullscreen',
    chromatic: {
      viewports: [768, 320],
    },
  }}
  decorators={[
    fullscreenLayout,
    withNoAnimation,
  ]}
  argTypes={{
    open: {
      control: "boolean",
      default: false
    },
    caption: {
      control: "text",
      default: "",
    },
    externalLink: {
      control: "text",
      default: "",
    },
    embedUrl: {
      control: "text",
      default: "",
    },
    width: {
      control: "text",
      default: "",
    },
  }}
/>

export const openDialog = async (event, args) => {
  document.getElementById(args.id).open=true
}

export const DummyContent = () => `
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
`;

export const DrawerTemplate = (args) => html`
  <bl-drawer id=${ifDefined(args.id)}
             caption=${ifDefined(args.caption)}
             embed-url=${ifDefined(args.embedUrl)}
             external-link=${ifDefined(args.externalLink)}
             width=${ifDefined(args.width)}>
    <div style="font: var(--bl-font-body-text-2)">
      ${unsafeHTML(args.content)}
    </div>
  </bl-drawer>
`;

export const StoryTemplate = (args) => html`
  ${DrawerTemplate(args)}
  <bl-button style="margin: 16px;" @click="${(event)=>openDialog(event, args)}">${ifDefined(args.buttonText)}</bl-button>
`;

# Drawer

<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/192)</bl-badge>
<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=2963%3A14146)</bl-badge>
<bl-badge icon="check_fill">RTL Supported</bl-badge>

A drawer presents context-specific information and/or actions without leaving the current page

<bl-alert variant="warning" icon>Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>

### Design Rules

* Title and external link displayed on header section in drawer. Both of them are optional.
* Close button always displayed on header section and drawer can be closed by clicking close button.
* By default, Drawer can not close by clicking somewhere outside drawer.
* Drawer appears right side on the page with full height expanded.
* Title can be multiline automatically if it does not fit one line.
* When drawer does not fit in its fixed size, it switches to mobile view.
* There is an attribute about iframe and drawer component handle iframe rendering itself.
* Only one drawer can display at the same time. When one drawer opens others will be closed.

## Usage

<Canvas isColumn>
  <Story name="Default Values"
         play={(event) => openDialog(event,{id:'drawer-1'})}
         args={{id:"drawer-1", buttonText:"default drawer", content: DummyContent()}}>
    {StoryTemplate.bind({})}
  </Story>
  <Story name="With caption"
         play={(event)=> openDialog(event,{id:'drawer-2'})}
         args={{id:"drawer-2", buttonText:"with caption", caption: "Caption", content:'example content'}}>
    {StoryTemplate.bind({})}
  </Story>
  <Story name="With long caption"
         play={(event) => openDialog(event,{id:'drawer-3'})}
         args={{id:"drawer-3", buttonText:"with long caption", caption: "This drawer has a long caption and automatically handle it", content:'example content'}}>
    {StoryTemplate.bind({})}
  </Story>
  <Story name="With caption and externalLink"
         play={(event) => openDialog(event,{id:'drawer-4'})}
         args={{id:"drawer-4", buttonText:"with caption and external", caption: "Caption", externalLink:"some-url", content:'example content'}}>
    {StoryTemplate.bind({})}
  </Story>
  <Story name="With caption and embedUrl"
         play={(event) => openDialog(event,{id:'drawer-5'})}
         args={{id:"drawer-5", buttonText:"with caption, embedUrl", caption: "Caption", embedUrl:"/assets/demo-iframe.html"}}>
    {StoryTemplate.bind({})}
  </Story>
    <Story name="With custom width"
         play={(event) => openDialog(event,{id:'drawer-6'})}
         args={{id:"drawer-6", buttonText:"with custom width", caption: "Custom Width Drawer", content: DummyContent(), width: "800px"}}>
    {StoryTemplate.bind({})}
  </Story>
</Canvas>

## RTL Support

The drawer component supports RTL (Right-to-Left) text direction. You can enable RTL mode by setting the `dir` attribute on a parent element or the `html` tag. When in RTL mode, the drawer will slide in from the left side instead of the right.

<Canvas>
  <Story name="RTL Support">
    {() => html`
      <div style="display: flex; gap: 32px; padding: 32px;">
        <div>
          <p style="margin-bottom: 8px;">LTR (Left-to-Right)</p>
          <bl-button @click=${() => document.getElementById('drawer-ltr').open = true}>Open LTR Drawer</bl-button>
          <bl-drawer id="drawer-ltr" caption="Settings">
            <div style="padding: 16px;">
              <h3>Settings Panel</h3>
              <p>This is a sample drawer content in LTR mode.</p>
            </div>
          </bl-drawer>
        </div>
        <div dir="rtl">
          <p style="margin-bottom: 8px;">RTL (Right-to-Left)</p>
          <bl-button @click=${() => document.getElementById('drawer-rtl').open = true}>Open RTL Drawer</bl-button>
          <bl-drawer id="drawer-rtl" caption="الإعدادات">
            <div style="padding: 16px;">
              <h3>لوحة الإعدادات</h3>
              <p>هذا مثال لمحتوى القائمة في وضع RTL.</p>
            </div>
          </bl-drawer>
        </div>
      </div>
    `}
  </Story>
</Canvas>

Here's a vanilla JavaScript and HTML example of how to use RTL support:

```html
<!-- index.html -->
<html>
<head>
  <meta charset="UTF-8">
  <title>Baklava Drawer RTL Example</title>
  <!-- Import Baklava's CSS and JavaScript -->
  <script type="module" src="path/to/baklava.js"></script>
  <style>
    .container {
      margin: 20px;
    }
    .drawer-container {
      display: flex;
      gap: 32px;
      margin-top: 20px;
    }
    .drawer-group {
      flex: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    <button onclick="toggleDirection()">Toggle RTL/LTR</button>

    <div class="drawer-container">
      <!-- LTR Example -->
      <div class="drawer-group">
        <h3>LTR Drawer</h3>
        <bl-button onclick="openDrawer('drawer-ltr')">Open LTR Drawer</bl-button>
        <bl-drawer id="drawer-ltr" caption="Settings">
          <div style="padding: 16px;">
            <h3>Settings Panel</h3>
            <p>This is a sample drawer content in LTR mode.</p>
          </div>
        </bl-drawer>
      </div>

      <!-- RTL Example -->
      <div class="drawer-group" dir="rtl">
        <h3>RTL Drawer</h3>
        <bl-button onclick="openDrawer('drawer-rtl')">فتح القائمة</bl-button>
        <bl-drawer id="drawer-rtl" caption="الإعدادات">
          <div style="padding: 16px;">
            <h3>لوحة الإعدادات</h3>
            <p>هذا مثال لمحتوى القائمة في وضع RTL.</p>
          </div>
        </bl-drawer>
      </div>
    </div>
  </div>

  <script>
    // Example of dynamically changing direction
    const toggleDirection = () => {
      const rtlContainer = document.querySelector('[dir="rtl"]');
      rtlContainer.dir = rtlContainer.dir === 'rtl' ? 'ltr' : 'rtl';
    };

    // Function to open drawer
    const openDrawer = (drawerId) => {
      document.getElementById(drawerId).open = true;
    };

    // Example of creating a drawer programmatically
    const createDrawer = (isRTL) => {
      const container = document.createElement('div');
      if (isRTL) container.dir = 'rtl';

      const drawer = document.createElement('bl-drawer');
      drawer.id = isRTL ? 'rtl-drawer' : 'ltr-drawer';
      drawer.caption = isRTL ? 'الإعدادات' : 'Settings';

      const content = document.createElement('div');
      content.style.padding = '16px';

      const heading = document.createElement('h3');
      heading.textContent = isRTL ? 'لوحة الإعدادات' : 'Settings Panel';
      content.appendChild(heading);

      const paragraph = document.createElement('p');
      paragraph.textContent = isRTL
        ? 'هذا مثال لمحتوى القائمة في وضع RTL.'
        : 'This is a sample drawer content in LTR mode.';
      content.appendChild(paragraph);

      drawer.appendChild(content);
      container.appendChild(drawer);
      document.body.appendChild(container);

      return drawer;
    };
  </script>
</body>
</html>
```

## Reference

<ArgsTable of="bl-drawer" />
